<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.dlt{
				text-decoration: line-through;
				color: #ccc;
			}
			a {
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h1>任务列表</h1>
			<p>任务总数:{{type.length}};还有:{{typetrueLength}}未完成;<a> </a><a href="#" v-on:click="close()"> 【完成】 </a></p>
			<ul>
				<li v-for="(item,index) in type" :class="[item.boole?'dlt':'s']" >
					<input type="checkbox" v-on:change="fn(item,index)" :checked="item.boole"  />
					{{item.name}}
				</li>
			</ul>
			<input type="text" value="" v-model="msg" /><input type="button" value="添加" v-on:click="add()" />
		</div>
		
		<script src="../js/vue.min.js"></script>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					type:[
					{"name":"设计产品原型","boole":false},
					{"name":"UI设计","boole":false},
					{"name":"编写页面代码","boole":false},
					{"name":"编写js代码","boole":false}
					],
					typetrueLength:0,
					msg:''
				},
				methods:{
					fn:function(item,index){
						if(item.boole==false){
							for (var i = 0; i < this.type.length; i++) {
								if(i==index){
									this.type[i].boole=true;
									this.typetrueLength-=1;
								}
							}
						}else{
							for (var i = 0; i < this.type.length; i++) {
								if(i==index){
									this.type[i].boole=false;
									this.typetrueLength+=1;
								}
							}
						}
						
					},
					close:function(){
						for (var i = 0; i < this.type.length; i++) {
							if(this.type[i].boole==true){
								this.type.splice(i, 1);
							}
							for (var i = 0; i < this.type.length; i++) {
								if(this.type[i].boole==true){
									this.type.splice(i, 1);
								}
							}
						}
						for (var i = 0; i < this.type.length; i++) {
							if(this.type[i].boole==true){
								this.type.splice(i, 1);
							}
						}
					},
					add:function(){
						if(this.msg==''){
							alert("请输入内容");
						}else{
							var Obj = {"name":this.msg,"boole":false};
							this.type.push(Obj);
							this.typetrueLength+=1;
							this.msg='';
						}
					}
				},
				created:function(){
					this.typetrueLength=this.type.length;
				}
			});
		</script>
	</body>
</html>
